import React from 'react';
import {View, Text, Platform} from 'react-native';
import {useHeaderHeight} from '@react-navigation/elements';
import {useNavigation} from '@react-navigation/native';

import {Header} from '@react-navigation/elements';

import {useMount} from 'ahooks';
import style from './style.less';

import ToggleDrawer from '../../ToggleDrawer';

const HeaderTitle = ({height, goBackEl, ...otherProps}) => {
  return (
    <View
      style={[
        style.HeaderTitle,
        {
          height,
        },
      ]}>
      {goBackEl}
      <Text>YYY</Text>
    </View>
  );
};

export default ({leftNavIsOpen, setLeftNavIsOpen}) => {
  const navigation = useNavigation();
  const height = useHeaderHeight() - (Platform.OS === 'ios' ? 20 : 0);
  useMount(() => {
    navigation.setOptions({
      // headerLeft: () => <Text></Text>,
      // headerTitle: () => <Text></Text>,
      // headerBackVisible: false,
      // headerBackTitleVisible: false,
      // headerTitle: props => (
      //   <HeaderTitle
      //     {...props}
      //     height={height}
      //     goBackEl={<ToggleDrawer {...{leftNavIsOpen, setLeftNavIsOpen}} />}
      //   />
      // ),
      // headerStyle: {justifyItems: 'center',backgroundColor: 'red',paddingLeft: 10},
      headerLeftContainerStyle: {
        backgroundColor: 'black',
      },
      // headerRight: () => <View style={{flex:1,backgroundColor: '#ccc'}}><Text>OK</Text></View>
    });
  });
  return <Text>视频</Text>;
};
